SOP 4: Creation of website using HTML5 and CSS.
Create a webpage as given layout use <nav>,<header>,<footer>,<aside>,<article> with CSS
Source Code: Form.html
<!DOCTYPE html>
<html>
<head>
<title>News Layout</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1 class="heading">News</h1>
<p>Local and National News</p>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Archives</a>
<a href="#">About</a>
</nav>
<section id="main">
<div id="left">
<div class="section-title">Local News</div>
<div class="article">
<h3>Fire fighters rescue man from building</h3>
<p>(reporter name, date)</p>
<p>This is the story of the rescue. Details of the event go here.</p>
</div>
<div class="article">
<h3>New Library to be built</h3>
<p>(reporter name, date)</p>
<p>Details about the library project.</p>
</div>
<div class="section-title">National News</div>
<div class="article">
<h3>Snow storm is making travel difficult</h3>
<p>(reporter name, date)</p>
<p>Storm details and affected areas.</p>
</div>
<div class="article">
<h3>Thousands are without power</h3>
<p>(reporter name, date)</p>
<p>Power outage information and updates.</p>
</div>
</div>
<aside>
<h3>Be a news reporter</h3>
<p>If you see news happening - Send us a text.</p>
</aside>
</section>
<footer>
Footer Information
</footer>
</body>
</html>
Program Code (style.css)
body {
margin: 0;
font-family: Arial, sans-serif;
background: #dcdcdc;
}
header {
background: white;
padding: 15px 20px;
}
.heading {
margin: 0;
font-size: 30px;
}
header p {
margin: 5px 0 0 0;
font-size: 14px;
}
nav {
background-color: navy;
height: 36px;
display: flex;
align-items: center;
padding-left: 20px;
}
a {
color: white;
font-weight: bold;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 2px;
margin-right: 25px;
font-size: 14px;
}
#main {
display: flex;
padding: 15px 20px;
}
#left {
width: 72%;
margin-right: 2%;
}
.section-title {
background: #bbbbbb;
padding: 8px;
font-weight: bold;
border: 1px solid #a9a9a9;
margin-top: 15px;
font-size: 18px;
}
.article {
background: white;
border: 1px solid #a9a9a9;
padding: 12px;
margin-top: 10px;
}
aside {
width: 26%;
background: #d0d0d0;
padding: 12px;
border: 1px solid #b5b5b5;
height: fit-content;
}
footer {
background-color: navy;
color: white;
text-align: center;
padding: 10px;
font-weight: bold;
font-size: 14px;
margin-top: 20px;
}